import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import { CSSTransition, Transition } from 'react-transition-group';
import './index.less';

// 动画
const transitionStyles = {
  entering: { display: 'block' },
  entered: { opacity: 'block' },
  exiting: { display: 'block' },
  exited: { display: 'none' },
};

interface modalPropsType {
  title?: string;
  visible?: boolean;
  onCancel?: () => void;
  onOk?: () => void;
}

const modal: React.FC<modalPropsType> = props => {
  const { title, visible, onCancel, onOk, children } = props;

  // 禁止页面滚动
  useEffect(() => {
    if (visible) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'auto';
    }
  }, [visible]);

  return ReactDOM.createPortal(
    <div className="ant-modal-root">
      {/* 遮罩 */}
      <CSSTransition in={visible} timeout={400} unmountOnExit classNames="mask">
        <div className="ant-modal-mask"></div>
      </CSSTransition>
      <Transition in={visible} timeout={400}>
        {state => (
          <div
            // tabIndex="-1"
            className="ant-modal-wrap"
            role="dialog"
            aria-labelledby="rcDialogTitle0"
            style={{ ...transitionStyles[state] }}
            // onClick={onCancel}
          >
            {/*   modal */}
            <CSSTransition in={visible} timeout={400} classNames="modal">
              <div
                role="document"
                className="ant-modal"
                style={{ width: '520px', transformOrigin: '0 50px' }}
              >
                <div className="ant-modal-content">
                  {/* close */}
                  <button
                    onClick={onCancel}
                    type="button"
                    aria-label="Close"
                    className="ant-modal-close"
                  >
                    <span className="ant-modal-close-x">
                      <span
                        role="img"
                        aria-label="close"
                        className="anticon anticon-close ant-modal-close-icon"
                      >
                        <svg
                          viewBox="64 64 896 896"
                          focusable="false"
                          data-icon="close"
                          width="1em"
                          height="1em"
                          fill="currentColor"
                          aria-hidden="true"
                        >
                          <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
                        </svg>
                      </span>
                    </span>
                  </button>
                  {/*  header */}
                  <div className="ant-modal-header">
                    <div className="ant-modal-title" id="rcDialogTitle0">
                      {title}
                    </div>
                  </div>
                  {/*  body */}
                  <div className="ant-modal-body">{children}</div>
                  {/*  footer */}
                  <div className="ant-modal-footer">
                    <button
                      type="button"
                      className="ant-btn"
                      onClick={onCancel}
                    >
                      <span>取 消</span>
                    </button>
                    <button
                      type="button"
                      className="ant-btn ant-btn-primary"
                      onClick={onOk}
                    >
                      <span>确 定</span>
                    </button>
                  </div>
                </div>
              </div>
            </CSSTransition>
          </div>
        )}
      </Transition>
    </div>,
    document.body,
  );
};

export default modal;
